<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Document</title>
     <style>
         *{
  margin: 0;
  padding: 0;
}
.box{
  width: 700px;
  height: 700px;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 30px;
  position: relative;
}

.content{
  width: 100%;
  height: 100px;
  background-color: rgb(181, 174, 187);
  display: flex;
  align-items: center;
  position: relative;
}
.text{
  width: 140px;
}
.input{
  cursor: pointer;
  font-size: 40px;
  border-radius: 8px;
  border: none;
  text-indent: .5em;
  outline: none;
}
button{
 cursor: pointer;
  font-size: 30px;
  border-radius: 8px;
  border: none;
  color: aliceblue;
  outline: none;
  text-align: center;
  margin-left: 20px;
  background-color: rgb(150, 105, 147);
}
.body{
  width: 100%;
  height: 90%;
  background-color: rgb(216, 216, 205);
  overflow: scroll;
}


     </style>
</head>
<body>
    <div class='box'>
        <div class='content'>
            <div class='text'>Todo list</div>
            <input class='input'placeholder="add...."/>
            <button class="btn" disabled>send</button>
        </div>

        <div class='body'></div>
        
        
    </div>

    <script src="work.js"></script>
</body>
</html>